<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>watch侦听</h1>
    <p>count: {{ count }}</p>
    <button @click="fn">count++</button>
    <p>obj: {{ obj }}</p>
    <button @click="fn2">change msg</button>

    <hr>

    <p>num: {{ num }}</p>
    <button @click="fn3">num++</button>

    <button @click="fn4">开启对num的监听</button>
    <button @click="fn5">关闭对num的监听</button>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          count: 1,
          obj: {
            a: 3,
            b: 4
          },
          num: 1,
          a: null
        }
      },
      // watch选项可以对响应式数据做一个侦听（监听）
      watch: {
        // 如果要监听count变量，在watch里面就可以直接写一个count函数
        // watch监听的不只有data里面的数据，也可以是computed等响应式数据
        // watch的函数可以接受两个参数，分别是改变前的值和改变后的值
        // 默认情况下watch的函数是在数据改变以后，但是在页面刷新之前调用的
        count(val, oldVal) {
          console.log("count改变了" + val + "," + oldVal);
          console.log(document.querySelector("p").innerHTML);
          
        },
        // 对于对象的监听，默认是监听不到里面的属性的变化的
        // 可以监听对象里面的具体的属性
        // 语法要使用.操作符
        // 'obj.a'() {
        //   console.log("obj里面的a属性改变了");
        // }

        // 相对一个对象做深度的监听,可以把这个函数的语法改成对象的语法
        // deep: true表示深度监听
        // immediate: true表示即时回调的侦听器(进入页面的时候先做一个监听),非常适合用于做分页器
        // once: true表示一次性侦听器
        // flush: 'post'表示在页面刷新之后执行watch的函数
        obj: {
          handler() {
            console.log("obj改变了");
          },
          deep: true,
          immediate: true,
          // once: true,
          flush: 'post'
        },
        // num() {
        //   console.log("num改变了");
        // }
      },
      computed: {},
      methods: {
        fn() {
          this.count++
        },
        fn2() {
          this.obj.a = 30
        },
        fn3() {
          this.num++;
        },
        fn4() {
          // 可以用this.$watch来开启对某一个变量的监听
          this.a = this.$watch('num', () => {
            console.log("num改变了");
          })
        },
        fn5() {
          this.a()
        }
      },
    }).mount("#app")

  </script>
</body>
</html>